<template>
<div class="list-content">
    <div class="clearfix mb10">
        <div class="fr">
            <router-link :to="this.$route.matched[1].path">
                <input type="button" class="uiBtn-normal uiBtn-orange fl" value="返回">
            </router-link>
        </div>
        <div class="fr mr5">
            <el-date-picker value-format="yyyy-MM" v-model="changeTime" type="month" placeholder="选择月" @change="timeChange()"></el-date-picker>
        </div>
        <div class="fr mr5">
            <el-input size="mini" placeholder="请输入搜索内容" suffix-icon="el-icon-search"  v-model="searchValue" @change="searchChange()"></el-input>
        </div>
    </div>
    <table class="uiTable">
        <thead>
            <tr>
                <th width="2%" rowspan='2'>序号</th>
                <th width="2%" rowspan='2'>地区</th>
                <th width="5%" rowspan='2'>项目编号</th>
                <th width="3%" rowspan='2'>
                    <select class="theadselect thinScroll" v-model="stageValue" @change="selectFilter()">
                        <option value="">阶段</option>
                        <option value="10">审计</option>
                        <option value="20">准备</option>
                        <option value="30">在施</option>
                        <option value="31">施前</option>
                        <option value="32">施中</option>
                        <option value="33">施尾</option>
                        <option value="40">竣工</option>
                        <option value="50">完工</option>
                        <option value="60">历史</option>
                        <option value="70">坏账</option>
                        <option value="80">退单</option>
                    </select>
                </th>
                <th width="5%" rowspan='2'>
                    <span>合同金额</span>
                    <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('contract_fee', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('contract_fee', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th width="4%" rowspan='2'>
                    <span>面积</span>
                    <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('proarea', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('proarea', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th width="4%" rowspan='2'>
                    <select class="theadselect thinScroll" v-model="typeValue" @change="selectFilter()">
                        <option value="">类型</option>
                        <option value="1">办公</option>
                        <option value="2">餐饮</option>
                        <option value="3">商业</option>
                        <option value="4">酒店</option>
                        <option value="6">教育</option>
                        <option value="7">会所</option>
                        <option value="5">其他</option>
                    </select>
                </th>
                <th width="4%" rowspan='2'>设计师</th>
                <th width="3%" rowspan='2'>监理</th>
                <th width="3%" rowspan='2'>项经</th>
                <th width="3%" rowspan='2' data-title="开工日期">日期</th>
                <th width="12%" colspan="4">放线</th>
                <th width="9%" colspan="3">保护</th>
                <th width="9%" colspan="3">形象布置</th>
                <th width="3%">物业</th>
                <th width="6%" colspan="2">开工仪式</th>
                <th width="6%" colspan="2">摄像头</th>
                <th width="3%" rowspan='2'>人工</th>
                <th width="3%" rowspan='2'>材料</th>
                <th width="3%" rowspan='2'>质量</th>
                <th width="3%" rowspan='2'>现场</th>
                <th width="3%" rowspan='2'>投诉</th>
                <th rowspan='2' data-title="客户登陆次数">登陆</th>
            </tr>
            <tr>
                <th>
                     <span>个数</span>
                     <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('payOffOrderCount', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('payOffOrderCount', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th>倒计时</th>
                <th>
                    <span>完成</span>
                    <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('payOffPmFinishCount', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('payOffPmFinishCount', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th>设计师</th>
                <th>
                    <span>个数</span>
                     <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('protectionOrderCount', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('protectionOrderCount', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th>倒计时</th>
                <th>
                    <span>完成</span>
                    <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('protectionFinishCount', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('protectionFinishCount', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th>
                    <span>个数</span>
                    <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('imageOrderCount', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('imageOrderCount', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th>倒计时</th>
                <th>
                    <span>完成</span>
                    <div style="display:inline-block">
                        <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('imageFinishCount', 1)">
                            <i class="thSortI thSort-up"></i>
                        </a>
                        <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('imageFinishCount', 2)">
                            <i class="thSortI thSort-down"></i>
                        </a>
                    </div>
                </th>
                <th>状态</th>
                <th>开启</th>
                <th>状态</th>
                <th>开启</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="2%">合计</td>
                <td width="2%">{{listData.length}}</td>
                <td width="5%"></td>
                <td width="3%"></td>
                <td width="5%">{{contract_fee}}</td>
                <td width="4%">{{proarea}}</td>
                <td width="4%"></td>
                <td width="4%"></td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%">{{payOffPmFinishCount}}</td>
                <td width="3%">{{payOffDesFinishCount}}</td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%">{{protectionFinishCount}}</td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%">{{imageFinishCount}}</td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%"></td>
                <td width="3%">{{personOrderScale}}</td>
                <td width="3%">{{materialOrderScale}}</td>
                <td width="3%">{{craftOrderScale}}</td>
                <td width="3%">{{senceOrderScale}}</td>
                <td width="3%">{{complaintStatus}}</td>
                <td>{{loginCount}}</td>
            </tr>
        </tbody>
    </table>
    <div class="thinScroll thinScroll-table" v-scrollHeight="15" v-loading="loading" >
        <div class="thinScroll-infinite thinScroll thinScroll-table">
            <table class="uiTable uiTable-striped-odd uiTable-hover">
                <tbody>
                    <tr v-for="(item,index) in listData" :key="index">
                        <td width="2%">{{index+1}}</td>
                        <td width="2%">{{item.dq_name}}</td>
                        <td width="5%">{{item.orderno}}</td>
                        <td width="3%">{{item.AfterMarketState | stageFilter()}}</td>
                        <td width="5%">{{item.contract_fee && item.contract_fee !== '' ? `${(item.contract_fee / 10000).toFixed(2)}万` : '--'}}</td>
                        <td width="4%">{{item.proarea  && item.proarea !== '' ? `${item.proarea}㎡` : '--' }}</td>
                        <td width="4%">{{item.contract_type | stage()}}</td>
                        <td width="4%">{{item.designer_username}}</td>
                        <td width="3%">{{item.supervisor_username}}</td>
                        <td width="3%">{{item.pm_username}}</td>
                        <td width="3%" :data-title="item.construction_time">{{ item.construction_time !==null ? $utils.format('MM-dd',item.construction_time) : "未选"}}</td>
                        <td width="3%">{{item.payOffOrderCount === -1 ? "---":item.payOffOrderCount }}</td>
                        <td width="3%">{{item.timeOut === 10 || item.payOffStatus ===0 ? "---":item.timeOut}}</td>
                        <td width="3%">{{item.payOffPmFinishCount === -1 ? "---":item.payOffPmFinishCount}}</td>
                        <td width="3%">{{item.payOffDesFinishCount === -1 ? "---":item.payOffDesFinishCount}}</td>
                        <td width="3%">{{item.protectionOrderCount === -1 ? "---":item.protectionOrderCount}}</td>
                        <td width="3%">{{item.timeOut === 10 || item.protectionStatus ===0 ? "---":item.timeOut}}</td>
                        <td width="3%">{{item.protectionFinishCount === -1 ? "---":item.protectionFinishCount}}</td>
                        <td width="3%">{{item.imageOrderCount === -1 ? "---":item.imageOrderCount}}</td>
                        <td width="3%">{{item.timeOut === 10 || item.imageStatus ===0 ? "---":item.timeOut}}</td>
                        <td width="3%">{{item.imageFinishCount === -1 ? "---":item.imageFinishCount}}</td>
                        <td width="3%">{{item.businessStatus === 0 ? "完":"未"}}</td>
                        <td width="3%">{{item.groundbreakingStatus !== -1 ? "是":"否"}}</td>
                        <td width="3%">{{item.groundbreakingStatus === 0 ? "完":"未"}}</td>
                        <td width="3%">{{item.cameraStatus !== -1  ? "是":"否"}}</td>
                        <td width="3%">{{item.cameraStatus === 0 ? "完":"未"}}</td>
                        <td width="3%">{{item.personOrderCount}}/{{item.finishPersonOrderCount}}</td>
                        <td width="3%">{{item.materialCount}}/{{item.materialFinishCount}}</td>
                        <td width="3%">{{item.craftCount}}/{{item.finishCraftCount}}</td>
                        <td width="3%">{{item.senceCount}}/{{item.senceFinishCount}}</td>
                        <td width="3%">{{item.complaintStatus}}</td>
                        <td >{{item.loginCount}}</td>
                    </tr>
                    <tr v-if="listData.length === 0"> <td class="tx-center" colspan="31">暂无数据</td></tr>
                </tbody>
            </table>
            <!-- <div class="thSortBox" v-if="isShowLoad">
                <div class="animateBox">
                    <p class="animate animate1"></p>
                    <p class="animate animate2"></p>
                    <p class="animate animate3"></p>
                    <p class="animate animate4"></p>
                    <p class="animate animate5"></p>
                </div>
            </div> -->
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getListRedis } from '../../Resources/Api/scene'
export default {
    data () {
        return {
            busy: false, // 滚动是否等待
            stageValue: '', // 阶段
            listData: [], // 列表数据
            listCloneData: [], // 列表复制
            listCopyData: [], // 列表复制 存全部数据
            loading: false, // 是否loading
            searchValue: '', // 搜索value
            typeValue: '', // 类型value
            changeTime: '' // 搜索时间
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo']),
        // 合同额
        contract_fee () {
            let contractAll = 0
            this.listData.forEach(item => {
                if (item.contract_fee && item.contract_fee !== '') {
                    contractAll += Number(item.contract_fee)
                } else {
                    contractAll += 0
                }
            })
            return `${(contractAll / 10000).toFixed(2)}万`
        },
        // 面积
        proarea () {
            let proareaAll = 0
            this.listData.forEach(item => {
                if (item.contract_fee && item.contract_fee !== '') {
                    proareaAll += Number(item.proarea)
                } else {
                    proareaAll += 0
                }
            })
            return `${(proareaAll / 10000).toFixed(2)}万㎡`
        },
        // 放线个数
        payOffOrderCount () {
            let payOffOrderCountAll = 0
            this.listData.forEach(item => {
                payOffOrderCountAll += Number(item.payOffOrderCount)
            })
            return payOffOrderCountAll
        },
        // 倒计时
        timeOut () {
            let timeOutAll = 0
            this.listData.forEach(item => {
                timeOutAll += Number(item.timeOut)
            })
            return timeOutAll
        },
        // 放线完成总数
        payOffPmFinishCount () {
            let payOffOrderCountAll = 0
            let payOffPmFinishCountAll = 0
            this.listData.forEach(item => {
                payOffPmFinishCountAll += Number(item.payOffPmFinishCount)
                payOffOrderCountAll += Number(item.payOffOrderCount)
            })
            if (payOffOrderCountAll === 0 || payOffPmFinishCountAll === 0) {
                return '0%'
            } else {
                return `${(Number(payOffOrderCountAll) / Number(payOffPmFinishCountAll)).toFixed(2)}%`
            }
        },
        // 放线设计师个数
        payOffDesFinishCount () {
            let payOffOrderCountAll = 0
            let payOffDesFinishCountAll = 0
            this.listData.forEach(item => {
                payOffDesFinishCountAll += Number(item.payOffDesFinishCount)
                payOffOrderCountAll += Number(item.payOffOrderCount)
            })
            if (payOffDesFinishCountAll === 0 || payOffOrderCountAll === 0) {
                return '0%'
            } else {
                return `${(Number(payOffOrderCountAll) / Number(payOffDesFinishCountAll)).toFixed(2)}%`
            }
        },
        // 保护个数
        protectionOrderCount () {
            let protectionOrderCountAll = 0
            this.listData.forEach(item => {
                protectionOrderCountAll += Number(item.protectionOrderCount)
            })
            return protectionOrderCountAll
        },
        // 保护完成个数
        protectionFinishCount () {
            let protectionOrderCountAll = 0
            let protectionFinishCountAll = 0
            this.listData.forEach(item => {
                protectionFinishCountAll += Number(item.protectionFinishCount)
                protectionOrderCountAll += Number(item.protectionOrderCount)
            })
            if (protectionFinishCountAll === 0 || protectionOrderCountAll === 0) {
                return '0%'
            } else {
                return `${(Number(protectionFinishCountAll) / Number(protectionOrderCountAll)).toFixed(2)}%`
            }
        },
        // 形象布置个数
        imageOrderCount () {
            let imageOrderCountAll = 0
            this.listData.forEach(item => {
                imageOrderCountAll += Number(item.imageOrderCount)
            })
            return imageOrderCountAll
        },
        // 形象布置完成个数
        imageFinishCount () {
            let imageOrderCountAll = 0
            let imageFinishCountAll = 0
            this.listData.forEach(item => {
                imageFinishCountAll += Number(item.imageFinishCount)
                imageOrderCountAll += Number(item.imageOrderCount)
            })
            if (imageFinishCountAll === 0 || imageOrderCountAll === 0) {
                return '0%'
            } else {
                return `${(Number(imageFinishCountAll) / Number(imageOrderCountAll)).toFixed(2)}%`
            }
        },
        // 材料订单比例
        materialOrderScale () {
            let materialCount = 0
            let materialFinishCount = 0
            this.listData.forEach(item => {
                materialCount += Number(item.materialCount)
                materialFinishCount += Number(item.materialFinishCount)
            })
            if (materialFinishCount === 0) {
                return '0%'
            } else {
                return `${(materialFinishCount / materialCount).toFixed(2)}%`
            }
        },
        // 人工订单比例
        personOrderScale () {
            let personOrderCount = 0
            let finishPersonOrderCount = 0
            this.listData.forEach(item => {
                personOrderCount += Number(item.personOrderCount)
                finishPersonOrderCount += Number(item.finishPersonOrderCount)
            })
            if (finishPersonOrderCount === 0) {
                return '0%'
            } else {
                return `${(personOrderCount / finishPersonOrderCount).toFixed(2)}%`
            }
        },
        // 质量订单比例
        craftOrderScale () {
            let craftCount = 0
            let finishCraftCount = 0
            this.listData.forEach(item => {
                craftCount += Number(item.craftCount)
                finishCraftCount += Number(item.finishCraftCount)
            })
            if (finishCraftCount === 0) {
                return '0%'
            } else {
                return `${(finishCraftCount / craftCount).toFixed(2)}%`
            }
        },
        // 现场订单比例
        senceOrderScale () {
            let senceCount = 0
            let senceFinishCount = 0
            this.listData.forEach(item => {
                senceCount += Number(item.senceCount)
                senceFinishCount += Number(item.senceFinishCount)
            })
            if (senceFinishCount === 0) {
                return '0%'
            } else {
                return `${(senceFinishCount / senceCount).toFixed(2)}%`
            }
        },
        // 投诉个数
        complaintStatus () {
            let complaintStatusAll = 0
            this.listData.forEach(item => {
                if (item.complaintStatus) {
                    complaintStatusAll += Number(item.complaintStatus)
                } else {
                    complaintStatusAll += 0
                }
            })
            return complaintStatusAll
        },
        // 登陆次数
        loginCount () {
            let loginCountAll = 0
            this.listData.forEach(item => {
                if (item.loginCount) {
                    loginCountAll += Number(item.loginCount)
                } else {
                    loginCountAll += 0
                }
            })
            return loginCountAll
        }
    },
    created () {
        this.load()
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 排序函数
        compare (prop, type) {
            // 从小到大
            if (type === 1) {
                return function (a, b) {
                    return a[prop] - b[prop]
                }
            // 从大到小
            } else if (type === 2) {
                return function (a, b) {
                    return b[prop] - a[prop]
                }
            }
        },
        // 排序
        sortData (value, type) {
            this.listData = this.listData.sort(this.compare(value, type))
        },
        // 搜索
        searchChange () {
            // 判断是集团 监理 城登陆
            // 普通监理
            if (Number(this.userInfo.as_diquId) !== 39) {
                let listData
                if (this.userInfo.as_role === 0) {
                    listData = this.listCopyData.filter(item => {
                        return (
                            String(item.supervisor_username).match(this.userInfo.as_fullName)
                        )
                    })
                }
                // 城
                if (this.userInfo.as_role === 2) {
                    const areaID = this.userInfo.as_areaId === '' ? this.userInfo.as_diquId : this.userInfo.as_cityId
                    listData = this.listCopyData.filter(item => {
                        return (
                            String(item.dq_lishu).match(areaID)
                        )
                    })
                }
                // 工程
                if (this.userInfo.as_role === 3) {
                    listData = this.listCopyData.filter(item => {
                        return (
                            String(item.areaid).match(this.userInfo.as_diquId)
                        )
                    })
                }
                this.listData = listData
                this.listCloneData = this.listData
                this.listCopyData = this.listData
            }

            let stageReg = this.searchValue.replace(/\s+/g, '')
            if (stageReg === '') {
                this.listData = this.listCopyData
            } else {
                const listData = this.listCopyData.filter(item => {
                    return (
                        String(item.dq_name).match(stageReg) || String(item.designer_username).match(stageReg) || String(item.contract_no).match(stageReg) || String(item.pm_username).match(stageReg) ||
                        String(item.proname).match(stageReg) || String(item.supervisor_username).match(stageReg)
                    )
                })
                if (listData && listData.length >= 0) {
                    this.listData = listData
                    this.stageValue = ''
                    this.typeValue = ''
                }
            }
            if (this.listData && this.listData.length > 0) {
                this.listCloneData = this.listData
            }
        },
        // 时间搜索
        timeChange () {
            if (this.changeTime === '' || this.changeTime === null) {
                this.listData = this.listCloneData
            } else {
                const listData = this.listCloneData.filter(item => {
                    return (
                        String(item.construction_time).match(this.changeTime)
                    )
                })
                this.listData = listData
            }
        },
        // 筛选
        selectFilter () {
            // if (Number(this.stageValue) === 0 || Number(this.stageValue)) {
            //     this.listData = this.listCloneData
            // } else {
            let stageReg = new RegExp(`^${this.stageValue}$`)
            let typeReg = new RegExp(`^${this.typeValue}$`)
            if (!this.stageValue) stageReg = new RegExp(/[\s\S]*/)
            if (!this.typeValue) typeReg = new RegExp(/[\s\S]*/)
            if (Number(this.stageValue) === 30) {
                let construction = new RegExp(`^3`)
                this.listData = this.listCloneData.filter(item => (
                    construction.test(item.AfterMarketState) && typeReg.test(item.contract_type)
                ))
            } else {
                this.listData = this.listCloneData.filter(item => (
                    stageReg.test(item.AfterMarketState) && typeReg.test(item.contract_type)
                ))
            }
            // }
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 加载页面
        load () {
            // 用_this 代替this
            let _this = this
            _this.loading = true
            // 获取列表数据
            getListRedis().then(results => {
                if (results.data.StatusCode === 1) {
                    const list = results.data.Body.list
                    list.forEach(element => {
                        element.AfterMarketState = _this.$options.filters['AfterMarketState'](element.AfterMarketState, element.ConstructionPeriod)
                        _this.listData.push(element)
                    })
                    this.listCloneData = this.listData
                    this.listCopyData = this.listData
                    this.searchChange()
                    _this.loading = false
                }
            }).catch(error => {
                _this.loading = false
                console.log(error)
            })
        }
    },
    filters: {
        stage (num) {
            let value = ''
            switch (num) {
            case 0:
            case 1:
                value = '办公'
                break
            case 2:
                value = '餐饮'
                break
            case 3:
                value = '商业'
                break
            case 4:
                value = '酒店'
                break
            case 5:
                value = '其他'
                break
            case 6:
                value = '教育'
                break
            case 7:
                value = '会所'
                break
            }
            return value
        },
        stageFilter (parone) {
            let value = ''
            switch (parone) {
            case 10:
                value = '审计'
                break
            case 20:
                value = '准备'
                break
            case 30:
                value = '在施'
                break
            case 31:
                value = '施前'
                break
            case 32:
                value = '施中'
                break
            case 33:
                value = '施尾'
                break
            case 40:
                value = '竣工'
                break
            case 50:
                value = '完工'
                break
            case 60:
                value = '历史'
                break
            case 70:
                value = '坏账'
                break
            case 80:
                value = '退单'
                break
            }
            return value
        },
        AfterMarketState (parone, partwo) {
            let value = ''
            switch (parone) {
            case 0:
            case 1:
                value = 10
                break
            case 2:
                value = 20
                break
            case 3:
                switch (partwo) {
                case 1:
                    value = 31
                    break
                case 2:
                    value = 32
                    break
                case 3:
                    value = 33
                    break
                default:
                    value = 30
                    break
                }
                break
            case 4:
                value = 40
                break
            case 5:
                value = 50
                break
            case 6:
                value = 60
                break
            case 7:
                value = 70
                break
            case 8:
                value = 80
                break
            }
            return value
        }
    }
}
</script>
<style lang="scss" scoped>
    .thSortA {
        display: block;
        padding-top:0px;
    }
    .thSortAb{
        padding-bottom: 0px;
    }
    .uiTable td{
        word-break: break-all;
    }
    .animateBox {
        width: 45px;
        margin: 0 auto;
    }
    // 动画
    .animate {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background-color: #4b9cdb;
        margin-top: 10px;
    }
    .animate1 {
        animation: loading 2s infinite;
    }
    .animate2 {
        animation: loading 2s infinite;
        animation-delay: .15s;
    }
    .animate3 {
        animation: loading 2s infinite;
        animation-delay: .30s;
    }
    .animate4 {
        animation: loading 2s infinite;
        animation-delay: .45s;
    }
    .animate5 {
        animation: loading 2s infinite;
        animation-delay: .60s;
    }
    @keyframes loading {
    0% {
       opacity: .1
    }
    35% {
        opacity: .3
    }
    50% {
        opacity: .5
    }
    70% {
        opacity: .7
    }
    85% {
        opacity: .9
    }
    }
</style>
